<template>
    <el-card class="box-card">
        <div class="searchInput">
            <el-input v-model="input" clearable placeholder="请输入搜索内容" @clear="query()" style="width:240px;">
            </el-input>
            <el-button @click="handleSearch" style="margin-left: 10px;">搜索</el-button>
            <el-button @click="HandleAddEvent" style="margin-left: 10px;">添加
            </el-button>
        </div>

        <el-table :data="tableData" style="width: 100%" row-key="menuId" default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="menuId" label="编号">
            </el-table-column>
            <el-table-column prop="menuName" label="菜单名称">
            </el-table-column>
            <el-table-column prop="menuLogo" label="LOGO">
            </el-table-column>

            <el-table-column prop="menuUrl" label="菜单链接">
            </el-table-column>
            <el-table-column prop="authorize" label="菜单授权">
            </el-table-column>
            <el-table-column prop="menuType" label="菜单类型">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-tag type="" effect="dark">
                        <el-button @click="handleEdit(scope.row)" type="text" size="small" style="color:white">编辑
                        </el-button>
                    </el-tag>
                    <el-tag type="danger" effect="dark">
                        <el-button @click="handleDelete(scope.row)" type="text" size="small" style="color:white">删除
                        </el-button>
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>


        <!--编辑权限信息对话框-->
        <el-dialog title="编辑权限信息" :visible.sync="dialogEditFormVisible" width="28%">
            <el-form :model="editForm">
                <el-form-item label="修改权限父Id" :label-width="formLabelWidth">
                    <el-input v-model="editForm.pid"></el-input>
                </el-form-item>
                <el-form-item label="修改权限名称" :label-width="formLabelWidth">
                    <el-input v-model="editForm.menuName"></el-input>
                </el-form-item>
                <el-form-item label="修改权限链接" :label-width="formLabelWidth">
                    <el-input v-model="editForm.menuUrl"></el-input>
                </el-form-item>
                <el-form-item label="修改权限许可" :label-width="formLabelWidth">
                    <el-input v-model="editForm.authorize"></el-input>
                </el-form-item>
                <el-form-item label="修改权限类型" :label-width="formLabelWidth">
                    <el-input v-model="editForm.menuType"></el-input>
                </el-form-item>
                <el-form-item label="修改权限图片" :label-width="formLabelWidth">
                    <el-input v-model="editForm.menuLogo"></el-input>
                </el-form-item>
                <el-form-item label="修改权限序号" :label-width="formLabelWidth">
                    <el-input v-model="editForm.sort"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="editCancelHandle">取 消</el-button>
                <el-button type="primary" @click="editEnsureHandle">确 定</el-button>
            </div>
        </el-dialog>
        <!--添加权限对话框-->
        <el-dialog title="添加权限" :visible.sync="dialogFormVisible" width="28%">
            <el-form :model="form">
                <el-form-item label="权限父Id" :label-width="formLabelWidth">
                    <el-input v-model="form.pid"></el-input>
                </el-form-item>
                <el-form-item label="权限名称" :label-width="formLabelWidth">
                    <el-input v-model="form.menuName"></el-input>
                </el-form-item>
                <el-form-item label="权限链接" :label-width="formLabelWidth">
                    <el-input v-model="form.menuUrl"></el-input>
                </el-form-item>
                <el-form-item label="权限许可" :label-width="formLabelWidth">
                    <el-input v-model="form.authorize"></el-input>
                </el-form-item>
                <el-form-item label="权限类型" :label-width="formLabelWidth">
                    <el-input v-model="form.menuType"></el-input>
                </el-form-item>
                <el-form-item label="权限图片" :label-width="formLabelWidth">
                    <el-input v-model="form.menuLogo"></el-input>
                </el-form-item>
                <el-form-item label="权限序号" :label-width="formLabelWidth">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addCancelHandle">取 消</el-button>
                <el-button type="primary" @click="addEnsureHandle">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            input: '',
            form: {
                pid: '',
                menuName: '',
                menuUrl: '',
                authorize: '',
                menuType: '',
                menuLogo: '',
                sort: '',
            },
            treedata: [],
            defaultProps: {
                label: '',
                children: ''
            },
            editForm: {
                menuId: '',
                pid: '',
                menuName: '',
                menuUrl: '',
                authorize: '',
                menuType: '',
                menuLogo: '',
                sort: '',
            },
            roleList: [],
            roleName: '',
            value: '',
            // updateValue:'',
            label: '',
            id: '',
            dialogFormVisible: false,
            dialogEditFormVisible: false,
            formLabelWidth: '120px'
        }
    },
    created() {
        this.query();
    },
    methods: {
        query() {
            fetch('http://localhost/menu/tree')
                .then(response => response.json())
                .then((data) => {
                    this.tableData = data.data;
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.queryById(this.tableData[i].menuId);
                        // console.log("父id为：" + this.tableData[i].menuId);
                    }
                })
        },
        queryById(menuId) {
            fetch('http://localhost/menu?id=' + menuId)
                .then(response => response.json())
                .then((data) => {
                    let childNode = { children: '', label: '' };
                    childNode.children = data.data.children;
                    childNode.label = data.data.menuName;
                    this.treedata.push(childNode);
                    // console.log(childNode);
                })
        },
        handleEdit(row) {
            this.editForm.menuId = row.menuId;
            this.dialogEditFormVisible = !this.dialogEditFormVisible;
        },
        handleDelete(row) {
            fetch('http://localhost/menu/' + row.menuId, {
                method: 'DELETE',
            })
                .then(result => {
                    if (result) {
                        for (let i = 0; i < this.tableData.length; i++) {
                            if (this.tableData[i].menuId == row.menuId) {
                                this.tableData.splice(i, 1);
                                break;
                            }
                        }
                        this.query();
                        console.log(result.data);
                    } else {
                        alert("删除失败");
                    }
                })
        },
        handleSearch() {
            // alert(this.input);
            if (this.input) {
                fetch('http://localhost/menus/query?str=' + this.input)
                    .then(response => response.json())
                    .then((data) => {
                        this.tableData = data.data;
                    })
            }
        },
        HandleAddEvent() {
            this.dialogFormVisible = !this.dialogFormVisible;
        },
        //编辑用户信息 对话框
        editCancelHandle() {
            this.dialogEditFormVisible = false;
        },
        editEnsureHandle() {
            //axios put请求更新菜单权限
            this.axios.put('http://localhost/menu/update', this.editForm)
                .then(result => {
                    if (result.data) {
                        for (let i = 0; i < this.tableData.length; i++) {
                            if (this.tableData[i].menuId == this.id) {
                                this.tableData[i].pid = this.editForm.pid;         
                                this.tableData[i].menuName = this.editForm.menuName;  
                                this.tableData[i].menuUrl = this.editForm.menuUrl;
                                this.tableData[i].authorize = this.editForm.authorize;
                                this.tableData[i].menuType = this.editForm.menuType;
                                this.tableData[i].menuLogo = this.editForm.menuLogo;
                                this.tableData[i].sort = this.editForm.sort;
                            }
                        }
                        this.query();
                        console.log(result.data);
                    }
                })
            this.dialogEditFormVisible = false;
        },
        //添加用户 对话框
        addCancelHandle() {
            this.dialogFormVisible = false;
        },
        handleNodeClick(data) {
            console.log(data);
        },
        //添加用户发送post请求
        addEnsureHandle() {
            fetch('http://localhost/menu/insert', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(this.form)
            })
                .then((result) => {
                    this.query();
                    this.form.pid = '';
                    this.form.menuName = '';
                    this.form.menuUrl = '';
                    this.form.authorize = '';
                    this.form.menuType = '';
                    this.form.menuLogo = '';
                    this.form.sort = '';
                    console.log(result);
                })

            this.dialogFormVisible = false;
        }
    },
}
</script>

<style>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 480px;
}

.el-card {
    width: 90%;
    height: 90%;
    overflow: hidden;
    margin: 0 auto;
}

.searchInput {
    width: 420px;
    display: flex;
    left: 0;
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>

